<template>
  <div class="mv">
    <div class="recommend" v-if="mv_recommend_data.code == 200">
      <div class="top">
        <div class="left">MV精选</div>
        <div class="right">
          <button>更多MV</button>
        </div>
      </div>
      <ul>
        <li v-for="(item,index) in mv_recommend_data.result" :key="index">
          <div>
            <img v-lazy="item.picUrl" alt />
            <i>
              <b></b>
              <span>{{item.playCount<10000?item.playCount:Math.round(item.playCount/10000)+"万"}}</span>
            </i>
          </div>
          <p class="title">{{item.name}}</p>
          <p class="name">
            <span v-for="(item1,index1) in item.artists" :key="index1">
              {{item1.name}}
              <em v-if="index1<item.artists.length-1">/</em>
            </span>
          </p>
        </li>
      </ul>
    </div>
    <div class="rank" v-if="mv_rank_data.code == 200">
      <div class="left">
        <p class="title">
          <span>排行榜</span>
          <i></i>
        </p>
        <p class="time">更新时间:{{month}}月{{day}}日</p>
      </div>
      <div class="right">
        <img v-for="(item,index) in mv_rank_data.data" :key="index" v-lazy="item.cover" alt />
        <i></i>
      </div>
    </div>
    <div class="more">
      <div class="top">
        <div class="left">更多精彩MV</div>
        <div class="right">
          <button>MV分类</button>
        </div>
      </div>
      <!--mescroll滚动区域的基本结构-->
      <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
        <div class="item" v-for="(item,index) in dataList" :key="index">
          <div class="img">
            <img v-lazy="item.cover" alt />
            <i class="num">
              <b></b>
              <span>{{item.playCount<10000?item.playCount:Math.round(item.playCount/10000)+"万"}}</span>
            </i>
            <i
              class="time"
            >{{item.duration/1000/60>10?Math.floor(item.duration/1000/60):"0"+Math.floor(item.duration/1000/60)}}:{{item.duration/1000%60>10?item.duration/1000%60:"0"+item.duration/1000%60}}</i>
          </div>
          <p class="title">{{item.name}}</p>
          <p class="name">{{item.artistName}}</p>
        </div>
      </mescroll-vue>
      <div id="empty_box"></div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
  components: {
    MescrollVue // 注册mescroll组件
  },
  data() {
    return {
      month: new Date().getMonth() + 1,
      day: new Date().getDate(),
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        use: false
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10 //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看 这就是为什么无更多数据有时候不显示的原因
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "empty_box", //父布局的id (1.3.5版本支持传入dom元素)
          icon: require("../images/b_5.png"), //图标,默认null,支持网络图
          tip: "暂无相关数据~" //提示
        }
      },
      dataList: [] // 列表数据
    };
  },
  computed: {
    ...mapState("mv_recommend", ["mv_recommend_data"]),
    ...mapState("mv_rank", ["mv_rank_data"]),
    ...mapState("mv_all", ["mv_all_data"])
  },
  created() {
    this.$store.dispatch("mv_recommend/getMvRecommendData", {});
    this.$store.dispatch("mv_rank/getMvRankData", {
      limit: 2,
      page: 1,
      area: ""
    });
  },
  methods: {
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      // 联网请求
      this.$store
        .dispatch("mv_all/getMvAllData", {
          limit: page.size,
          page: page.num,
          area: "全部",
          order: "最热",
          type: "全部"
        })
        .then(data => {
          if (data.code == 200) {
            // 请求的列表数据
            let arr = data.data;
            // 如果是第一页需手动置空列表
            if (page.num === 1) this.dataList = [];
            // 把请求到的数据添加到列表
            this.dataList = this.dataList.concat(arr);

            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length);
            });
          }
        })
        .catch(e => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr();
        });
    }
  }
};
</script>

<style>
.mv .mescroll-empty .empty-icon {
  margin: auto;
}
.mv .mescroll-empty {
  padding-bottom: 0.5rem;
}
.mv .mescroll > div {
  background-color: #eee;
}
</style>

<style lang="scss" scoped>
.mv {
  padding-bottom: 1rem;
  .more {
    background-color: #fff;
    .item {
      padding: 0.1rem 0.3rem 0;
      background-color: #fff;
      margin-bottom: 0.2rem;
      p.title {
        font-size: 0.32rem;
        color: #333;
        text-align: left;
        line-height: 1rem;
      }
      p.name {
        font-size: 0.28rem;
        color: #999;
        text-align: left;
        line-height: 0.8rem;
        border-top: 0.01rem solid #eee;
      }
      .img {
        position: relative;
        img {
          border-radius: 0.2rem;
          height: 3.9rem;
        }
        i.time {
          position: absolute;
          bottom: 0.1rem;
          left: 0.2rem;
          color: #fff;
          font-size: 0.24rem;
        }
        i.num {
          position: absolute;
          top: 0.1rem;
          right: 0.2rem;
          color: #fff;
          font-size: 0.24rem;
          > b {
            background: url(../images/play_w.png) no-repeat;
            background-size: 100% 100%;
            width: 0.26rem;
            height: 0.26rem;
            display: inline-block;
            vertical-align: text-top;
          }
          > span {
            vertical-align: text-top;
          }
        }
      }
    }
    .top {
      background-color: #fff;
      padding: 0 0.3rem;
      line-height: 1rem;
      overflow: hidden;
      .left {
        float: left;
        color: #333;
        font-weight: 900;
        font-size: 0.4rem;
      }
      .right {
        float: right;
        font-size: 0.3rem;
        color: #333;
        button {
          border: 0.01rem solid #ccc;
          border-radius: 1rem;
          background-color: #fff;
          line-height: 0.4rem;
          font-size: 0.28rem;
          padding: 0 0.2rem; 
        }
      }
    }
  }
  .rank {
    border-top: 0.01rem solid #eee;
    border-bottom: 0.01rem solid #eee;
    padding: 0.3rem 0.3rem;
    overflow: hidden;
    .left {
      float: left;
      p {
        text-align: left;
      }
      p.title {
        span {
          font-size: 0.4rem;
          color: #333;
          font-weight: 900;
        }
        i {
          background: url(../images/aya.png) no-repeat;
          background-size: 100% 100%;
          width: 0.3rem;
          height: 0.3rem;
          display: inline-block;
          transform: rotate(-90deg);
        }
      }
      p.time {
        color: #999;
        font-size: 0.24rem;
      }
    }
    .right {
      float: right;
      position: relative;
      i {
        background: url(../images/at5.png) no-repeat;
        background-size: 100% 100%;
        width: 0.3rem;
        height: 0.3rem;
        opacity: 0.8;
        display: inline-block;
        position: absolute;
        top: 0.4rem;
        left: -1.1rem;
        z-index: 10;
      }
      img {
        border-radius: 0.1rem;
        position: absolute;
      }
      img:first-child {
        width: 1.9rem;
        right: 0;
        top: 0;
        z-index: 10;
      }
      img:nth-child(2) {
        width: 1.5rem;
        right: 0.65rem;
        top: 0.22rem;
      }
    }
  }
  .recommend {
    border-top: 0.01rem solid #eee;
    padding: 0 0.3rem;
    ul {
      overflow: hidden;
      li {
        width: 49%;
        float: left;
        margin-bottom: 0.2rem;
        div {
          position: relative;
          img {
            border-radius: 0.1rem;
            height: 1.9rem;
          }
          i {
            position: absolute;
            top: 0;
            right: 0.1rem;
            color: #fff;
            font-size: 0.24rem;
            > b {
              background: url(../images/play_w.png) no-repeat;
              background-size: 100% 100%;
              width: 0.26rem;
              height: 0.26rem;
              display: inline-block;
              vertical-align: text-top;
            }
            > span {
              vertical-align: text-top;
            }
          }
        }
        p {
          text-align: left;
        }
        p.title {
          font-size: 0.26rem;
          color: #333;
        }
        p.name {
          font-size: 0.24rem;
          color: #999;
        }
      }
      li:nth-child(2n + 1) {
        margin-right: 2%;
      }
    }
    .top {
      line-height: 1rem;
      overflow: hidden;
      .left {
        float: left;
        color: #333;
        font-weight: 900;
        font-size: 0.4rem;
      }
      .right {
        float: right;
        font-size: 0.3rem;
        color: #333;
        button {
          border: 0.01rem solid #ccc;
          border-radius: 1rem;
          background-color: #fff;
          line-height: 0.4rem;
          font-size: 0.28rem;
          padding: 0 0.2rem; 
        }
      }
    }
  }
}
</style>